<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>用户列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        .content_pic{
            width: 80px;
            height: 80px;
            background-size: cover;
            display: inline-block;
            margin-right: 1em;
            border: 1px solid #e6e6e6;
            cursor: pointer;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>举报管理</h5>
                    </div>
                    <div class="ibox-content">
                        <hr />
                            <div>
                                &nbsp;&nbsp;&nbsp;
                                <input placeholder="用户昵称" id="neckName">
                                &nbsp;&nbsp;&nbsp;
                                <input placeholder="用户账号" id="dyId">
                                <button type="button" id="select" class="btn btn-info"style="margin-top: 10px;height: 30px;width: 64px;"> 搜索 </button>
                            </div>
                            <div class="row row-lg">
                                <div class="col-sm-12">
                                    <!-- Example Card View -->
                                    <div class="example-wrap">
                                        <div class="example">
                                            <table id="table_list"></table>
                                        </div>
                                    </div>
                                    <!-- End Example Card View -->
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="blocked" style="z-index: 9;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);display: none;
position: fixed;top: 0;bottom: 0;left: 0;right: 0;">
        <div style="background-color: #ffffff;width: 60%;min-height: 100px;position: relative;top: 10%;margin: 0 auto;border-radius: 5px;padding: 3% 1%;color:rgb(51,51,51);">
            <div>
                <i class="nic_pic" style="display: inline-block;width: 70px;height: 70px;
            background: url(http://imgtu.5011.net/uploads/content/20170213/3890561486958361.jpg) no-repeat;
            background-size: cover;vertical-align: top;"></i>
                <div style="display: inline-block;vertical-align: top;width: 50%;overflow: hidden;">
                    <span>用户名称：<span class="user_name"></span></span><br>
                    <span>用户ID：<span class="user_id"></span></span><br>
                    <span>个性签名：<span class="user_sign"></span></span><br>
                    <span>注册时间：<span class="reg_time"></span></span>
                </div>
                <div style="display: inline-block;margin-left: 50px;line-height: 34px;">
                    <p style="color: #333333;">发帖量：<span class="content_count"></span></p>
                    <p style="margin-bottom: 0;color: #333333;">通过量：<span class="content_pass_count"></span></p>
                </div>
            </div>
            <div style="margin: 40px 0;">
                <div style="display: inline-block;width: 50%;text-align: center;">
                    <p style="color: #333333;">用户状态</p>
                    <p style="color: red;" class="blocked_type">永久全部封禁</p>
                </div>
                <div style="display: inline-block;width: 40%;">
                    <div>
                        <div style="color: #333333;display: inline-block;">封禁：</div>
                        <div style="display: inline-block;">
                            <select class="form-control" style="padding: 0;" name="blockedType">
                                <option value="1">全部封禁</option>
                            </select>
                        </div>
                    </div>
                    <div style="margin-top: 10px;">
                        <div style="color: #333333;display: inline-block;">时间：</div>
                        <div style="display: inline-block;">
                            <select class="form-control" style="padding: 0;" name="blockedTimeType">
                                <option value="2">一周</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="res_message hide" style="text-align: center;">提交成功</div>
            <div style="margin: 20px auto;width: 50%;">
                <button type="button" onclick="javascript:$('#blocked').hide();" class="btn btn-default" style="width: 40%;margin-right: 18%;">关闭</button>
                <button type="button" onclick="blocked_sub(this);" class="btn btn-info sub" style="width: 40%;">提交</button>
            </div>
        </div>
    </div>
    <!-- 全局js -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>


	<!-- Bootstrap table -->
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function () {
			//初始化表格,动态从服务器加载数据
            $(function () {
                //1.初始化Table
                var oTable = new TableInit();
                oTable.Init();
            });

        });

        var TableInit = function () {
            var oTableInit = new Object();
            $('#table_list').bootstrapTable('destroy');
            oTableInit.Init = function () {
                $("#table_list").bootstrapTable({
                    //使用get请求到服务器获取数据
                    method: "get",
                    //必须设置，不然request.getParameter获取不到请求参数
                    contentType: "json",
                    //获取数据的Servlet地址
                    url: "${ctx!}/complain/content/userPage",
                    queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                        return {
                            neckName: $("#neckName").val(),
                            dyId: $("#dyId").val(),
                            impaechType: 0, // 额外添加的参数
                            pageNumber:params.pageNumber,
                            pageSize: params.pageSize, // 每页要显示的数据条数
                            offset: params.offset, // 每页显示数据的开始行号
                            sort: params.sort, // 要排序的字段
                            sortOrder: params.order, // 排序规则
                        }
                    },
                    //表格显示条纹
                    striped: true,
                    //启动分页
                    pagination: true,
                    //记录数可选列表
                    pageList: [10, 20, 30, 50],
                    //是否启用查询
                    search: false,
                    //是否启用详细信息视图
                    detailView:true,
                    detailFormatter:detailFormatter,
                    //表示服务端请求
                    sidePagination: "server",
                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                    //设置为limit可以获取limit, offset, search, sort, order
                    queryParamsType: "undefined",
                    //json数据解析
                    responseHandler: function(res) {
                        return {
                            "rows": res.content,
                            "total": res.totalElements
                        };
                    },
                    //数据列
                    columns: [{
                        title: "用户ID",
                        field: "dyId",
                        sortable: true
                    },{
                        title: "用户手机",
                        field: "mobilePhone"
                    },{
                        title: "段友昵称",
                        field: "nickName"
                    },{
                        title: "注册时间",
                        field: "createData"
                    },{
                        title: "用户状态",
                        field: "userStatus",
                        formatter:function (value, row, index) {
                            if (value == 0) {
                                return "正常"
                            }else {
                                return "禁言"
                            }
                        }
                    },{
                        title: "禁言时间",
                        field: "statusDeadline"
                    },{
                        title:"被举报次数",
                        field:"impeachCount",
                        sortable: true
                    },{
                        title: "用户签名",
                        field: "signature"
                    },{
                        title: "用户头像",
                        field: "headPortraitUrl",
                        formatter: function (value, row, index) {
                            if (value != '' && value != undefined) {
                                var div = '<div onclick="urlInfo(\''+value+'\',\'0\')" class="content_pic" style="background-size: cover;background:url('+ value +
                                ')center center no-repeat background-size:cover"><img class="content_pic" src="'+value+'"></div>';
                                return div;
                            }else {
                                return "";
                            }
                        }
                    },{
                        title: "操作",
                        align: 'center',
                        valign: 'middle',
                        field: "dyId",
                        formatter: function (value, row, index) {
                            operateHtml = '<button class="btn btn-danger btn-xs" type="button" onclick="blocked('+row.dyId+')"><i class="fa fa-remove"></i>&nbsp;禁言</button>';
                            return operateHtml;
                        }
                    }],
                    onLoadSuccess: function(){  //加载成功时执行
                        console.info("加载成功");
                    },
                    onLoadError: function(){  //加载失败时执行
                        console.info("加载数据失败");
                    }
                });
            }

            return oTableInit;
        }

        urlInfo = function(url,contentType){
			var winWidth = window.innerWidth;
			var winHeight = window.innerHeight;
			var top = (winHeight-400)/2;
			var left = (winWidth-600)/2;
            window.open(url,'','width=600,height=400,top='+top+',left='+left+'')
		}

        blocked = function(dyId){
            if (dyId == undefined || dyId == null) return false;
            console.log( dyId + 'dsds');
            $.ajax({
                url: '/examine/dy/user/blocked/info',
                method: 'GET',
                data:  { publisherDyId : dyId },
                dataType: "json",
                beforeSend: function () {
                    $("#popEp .text-center").text('获取用户信息中，请稍后...');
                    $("#popEp").fadeIn();
                },
                success: function (data) {
                    $(".res_message").addClass('hide')
                    if (data.code == 0){
                        $("#popEp .text-center").text('获取成功!,页面正在渲染...');
                        $('#blocked').find('.nic_pic').css({'background':'url(' + data.data.headPortraitUrl + ') center center no-repeat','background-size':'cover'});
                        $('#blocked').find('.user_name').text(data.data.nickName);
                        $('#blocked').find('.user_id').text(data.data.publisherDyId);
                        $('#blocked').find('.user_sign').text(data.data.signature);
                        $('#blocked').find('.reg_time').text(data.data.createDate);
                        $('#blocked').find('.content_count').text(data.data.contentCount);
                        $('#blocked').find('.content_pass_count').text(data.data.contentPassCount);
                        var type = data.data.blockedType;
                        if (type == '' || type == '0') $('#blocked').find('.blocked_type').text('正常');
                        else if(type == '1')    $('#blocked').find('.blocked_type').text('全部封禁');
                        else if(type == '2')    $('#blocked').find('.blocked_type').text('封禁资料');
                        else if(type == '3')    $('#blocked').find('.blocked_type').text('封禁评论');
                        else if(type == '4')    $('#blocked').find('.blocked_type').text('封禁投稿');
                        $('#blocked').find('.sub').attr('data-user',dyId).attr('data-content',0);
                        $('#blocked').fadeIn();
                        $("#popEp").hide();
                        return true;
                    } else {
                        $('#popEp .text-center').text('获取失败，请稍后再试！');
                        setTimeout(function () {
                            $('#popEp').hide();
                        }, 1500);
                    }
                    return false;
                },
                error: function (xhr, type) {
                    if (xhr.status == 0) {
                        $("#popEp .text-center").text('请检查网络状态');
                    } else {
                        $("#popEp .text-center").text('系统繁忙, 稍候再试');
                    }
                    setTimeout(function () { $('#popEp').fadeOut(100); }, 500);
                    return false;
                }
            })
        };

        blocked_sub = function (obj) {
            var user_id = $(obj).attr('data-user');
            var content_id = $(obj).attr('data-content');
            var blockedType = $('select[name="blockedType"]').val();
            var blockedTimeType = $('select[name="blockedTimeType"]').val();

            if (user_id == undefined || user_id == null) return false;
            console.log('1234654');
            var payload = {
                publisherDyId : user_id,
                dyContentId : content_id,
                blockedType : blockedType,
                blockedTimeType : blockedTimeType
            };
            console.log(JSON.stringify(payload));
            $.ajax({
                url: '/examine/dy/user/blocked/info/update',
                headers: {'Content-type': 'application/json;charset=UTF-8'},
                method: 'POST',
                data: JSON.stringify(payload),
                dataType: "json",
                beforeSend: function () {
                    $(obj).attr('disabled',true);
                    $(".res_message").removeClass('hide').css('color','#333333').text('提交中，请稍后...');
                },
                success: function (data) {
                    if (data.code == 0) {
                        $(obj).attr('disabled',false);
                        $(".res_message").removeClass('hide').css('color','green').text('提交成功');
                        $('#blocked').hide();
                        setTimeout(function () {
                            var oTable = new TableInit();
                            oTable.Init();
                        }, 500);
                        return true;
                    }else{
                        $(".res_message").removeClass('hide').css('color','red').text('提交失败');
                    }
                    return false;
                },
                error: function (xhr, type) {
                    $(obj).attr('disabled',false);
                    if (xhr.status == 0) {
                        $(".res_message").removeClass('hide').css('color','red').text('请检查网络状态');
                    } else {
                        $(".res_message").removeClass('hide').css('color','red').text('系统繁忙, 稍候再试');
                    }
                    return false;
                }
            })
        }


        function detailFormatter(index, row) {
	        var html = [];
	        html.push('<p><b>内容详情:</b> ' + row.contentText + '</p>');
	        return html.join('');
	    }

        $("#select").bind("click", function(){
            console.log(444)
            var oTable = new TableInit();
            oTable.Init();
        });
    </script>

    
    

</body>

</html>
